<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="myList">
		<fui-nav-bar background="rgba(0,0,0,0)" :isFixed="true" title="我的" @leftClick="leftClick">
			<fui-icon name="arrowleft" color='#fff'></fui-icon>
		</fui-nav-bar>
		<image class="header-img" :src="baseOssUrl +'icon/my-img.png' " mode=""></image>
		<view class="head-cont ">
			<view class="my-info marin25" @click="infoBnt()">
				<view class="info-left">
					<image style="border-radius: 50%;border: 1rpx solid #E3E3E3;" :src="baseOssUrl2 + userInfo.tx" mode="" class="img-tx"></image>
					<view class="info-name">
						<text class='text1'>{{userInfo.username}}</text>
						<text class='text2'>{{userInfo.mobile || '未绑定手机号'}}</text>
					</view>
				</view>
				<!-- <view class="info-right">
					<fui-icon name="qrcode" :size="50"></fui-icon>
					<image class="kef-img" :src="baseOssUrl +'icon/kefu.png' " mode=""></image>
				</view> -->
			</view>
			<!-- <view class="bottom-icon marin25">
				<view class="icon-cont">
					<fui-icon name="signin" :size="50" style="margin: 0 80rpx;"></fui-icon>
					<view class="name-text">签到</view>
				</view>
				<view class="icon-cont">
					<fui-icon name="coupon" :size="50" style="margin: 0 80rpx;"></fui-icon>
					<view class="name-text font26">票劵</view>
				</view>
			</view> -->
		</view>
		<view class="my-list">
			<!-- <image :src="baseOssUrl+ 'icon/jingli.png' " mode="" class="lingqu"></image> -->
			<view class="list-cont">
				<!-- <fui-input disabled :padding="inputStyle" :labelSize="28"      @click="goZhukeInfo">
					1
					<fui-icon name="arrowright" size="35" color="#707070"></fui-icon>
				</fui-input> -->
				<!-- <fui-input borderTop  >收藏</fui-input> -->
				<fui-list>
					<fui-list-cell @click="collectionBnt()">
						<view class="guest-list">
							<image class='my-pic' :src="baseOssUrl + 'icon/my-sc.png' " mode=""></image> <text>我的收藏</text>
						</view>
						<input type="text" disabled class="guest-input">
						<fui-icon name="arrowright" size="35" color="#707070"></fui-icon>
						</input>
					</fui-list-cell>
					<fui-list-cell @click="evaluateBnt()">
						<view class="guest-list">
							<image class='my-pic' :src="baseOssUrl +  'icon/my-pj.png' " mode=""></image> <text>我的评价</text>
						</view>
						<input type="text" disabled class="guest-input">
						<fui-icon name="arrowright" size="35" color="#707070"></fui-icon>
						</input>
					</fui-list-cell>
					<fui-list-cell @click="complaintBnt()">
						<view class="guest-list">
							<image class='my-pic' :src="baseOssUrl +  'icon/my-ts.png' " mode=""></image> <text>投诉建议</text>
						</view>
						<input type="text" disabled class="guest-input">
						<fui-icon name="arrowright" size="35" color="#707070"></fui-icon>
						</input>
					</fui-list-cell>
					<fui-list-cell @click="settingBnt()">
						<view class="guest-list">
							<image class='my-pic' :src="baseOssUrl +  'icon/my-sz.png' " mode=""></image> <text>我的设置</text>
						</view>
						<input type="text" disabled class="guest-input">
						<fui-icon name="arrowright" size="35" color="#707070"></fui-icon>
						</input>
					</fui-list-cell>
				</fui-list>
			</view>
		</view>
		<!-- <view class="" @click="goLogin">
			点击登录
		</view> -->
		<f-tabs :current-page='2'></f-tabs>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	export default {
		//登录状态
		computed: mapState(['isLogin']),
		data() {
			return {
				userInfo: {},
				baseOssUrl: baseOssUrl,
				baseOssUrl2:baseOssUrl2
			}
		},
		onLoad() {

		},
		onShow() {
			this.get()
		},
		methods: {
			...mapMutations(['login', 'logout']),
			// 获取用户信息
			get() {
				this.$http.get(this.$httpApi.getInfo, {
					data: {
						 id: uni.getStorageSync('userinfo').userId
					}
				}).then(res => {
					if (res.code == 0) {
						this.userInfo = res.user
						console.log(JSON.parse(res.page[0].catering.content))
					}
				})
			},
			// 跳转我的设置
			infoBnt() {
				uni.navigateTo({
					url: '/pages/my/info/index'
				})
			},
			// 跳转我的收藏
			collectionBnt() {
				uni.navigateTo({
					url: '/pages/my/collection/index'
				})
			},
			// 跳转我的评价
			evaluateBnt() {
				uni.navigateTo({
					url: '/pages/my/evaluate/index'
				})
			},
			// 跳转反馈
			complaintBnt() {
				uni.navigateTo({
					url: '/pages/my/complaint/index'
				})
			},
			// 跳转设置
			settingBnt(e) {
				uni.navigateTo({
					url: '/pages/my/setting/index'
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
				// wx.getUserInfo({
				// 	success(res) {
				// 		console.info(res);
				// 		this.userInfo = res.userInfo
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myList {
		height: 100%;

		.header-img {
			width: 100%;
			height: 420rpx;
		}

		.head-cont {
			background: #FFFFFF;
			margin-top: -150rpx;
			position: relative;
			padding-bottom:50rpx;
			z-index: 999;
			margin-left: 24rpx;
			border-radius: 80rpx 0rpx 0rpx 10rpx;

			.my-info {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.info-left {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 0;

					.info-name {
						display: flex;
						flex-direction: column;
						margin-left: 24rpx;

						.text1 {
							font-weight: bold;
							font-size: 32rpx;
						}

						.text2 {
							color: #4A4A4A;
							margin-top: 16rpx;
						}
					}
				}

				.info-right {
					.kef-img {
						margin-left: 60rpx;
						width: 45rpx;
						height: 45rpx;
					}
				}

				.img-tx {
					width: 120rpx;
					height: 120rpx;
				}

			}

			.bottom-icon {
				display: flex;
				justify-content: center;
				align-items: center;

				.icon-cont {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.name-text {
						color: #777777;
						font-size: 26rpx;
					}
				}

			}

		}

		.my-list {
			margin-left: 24rpx;
			margin-top: 24rpx;

			.lingqu {
				width: 100%;
				height: 170rpx;
			}

			.list-cont {
				border-radius: 10rpx 0 0 10rpx;
				margin-top: 24rpx;
				overflow: hidden;

				image {
					width: 32rpx;
					height: 35rpx;
				}

				.guest-list {
					display: flex;
					align-items: center;
				}

				.my-pic {
					margin-right: 20rpx;
				}
			}
		}

		// 标题文字颜色
		/deep/.fui-nav__title {
			color: #FFFFFF;
		}

		// 底部菜单
		/deep/.fui-tabbar__icon {
			width: 38rpx !important;
			height: 38rpx !important;
		}

		/deep/.fui-tabbar__icon-wrap {
			width: 38rpx !important;
			height: 38rpx !important;
		}

		/deep/.fui-tabbar__wrap {
			background: #FFFFFF;
			box-shadow: 0px 2px 12px 1px rgba(0, 0, 0, 0.11);
		}

		/deep/.fui-tabbar__wrap {
			width: 90%;
			margin: 0 5%;
			border-radius: 60rpx;
			bottom: 50rpx;
		}

		/deep/.fui-tabbar__safe-area {
			display: none !important;
		}

		.fui-search__bar-label .data-v-1cc8ebce .fui-sb__label-center {
			background: none;
		}

		// 底部菜单
		/deep/.fui-tabbar__text {
			// font-size: 20rpx !important;
			margin-top: 3rpx;
		}

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>
